<template>
  <div class="mvlist">
    <!-- 选择更换mv类型 -->
    <van-dropdown-menu>
      <!-- mv地址 -->
      <van-dropdown-item v-model="mvAreaValue" :options="mvAreaOption" v-on:change="mvAreaChange" />
      <!-- mv类型 -->
      <van-dropdown-item v-model="mvTypeValue" :options="mvTypeOption" v-on:change="mvTypeChange" />
      <!-- mv排序 -->
      <van-dropdown-item v-model="mvOrderValue" :options="mvOrderOption" v-on:change="mvOrderChange" />
    </van-dropdown-menu>
    <!-- mv列表 -->
    <van-list :offset="800" v-if="changeListShow" :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in mvList" :key="item.id" v-on:click="$router.push(`/mvDetail?id=${item.id}`)">
        <template>
          <div class="mvs">
            <div class="mvs_cover">
              <van-image width="100%" height="100%" :src="item.cover" />
              <span class="mvs_info">
                {{item.name}}
              </span>
            </div>
          </div>
        </template>
      </van-cell>
    </van-list>
    <!-- 加载loading -->
    <van-loading v-else color="red" vertical size="35px" text-size="18px">加载中...</van-loading>
  </div>
</template>

<script>
import { getZuixinMv } from '../../../utils/api'
export default {
  name: 'MvList',
  data () {
    return {
      // mv地址
      mvAreaValue: '全部',
      // mv类型
      mvTypeValue: '全部',
      // mv排序
      mvOrderValue: '上升最快',
      // mv地址选项
      mvAreaOption: [{
        text: '全部',
        value: '全部'
      }, {
        text: '内地',
        value: '内地'
      }, {
        text: '港台',
        value: '港台'
      }, {
        text: '欧美',
        value: '欧美'
      }, {
        text: '日本',
        value: '日本'
      }, {
        text: '韩国',
        value: '韩国'
      }],
      // mv排序选项
      mvOrderOption: [{
        text: '上升最快',
        value: '上升最快'
      }, {
        text: '最热',
        value: '最热'
      }, {
        text: '最新',
        value: '最新'
      }],
      // mv类型选项
      mvTypeOption: [{
        text: '全部',
        value: '全部'
      }, {
        text: '官方版',
        value: '官方版'
      }, {
        text: '原生',
        value: '原生'
      }, {
        text: '现场版',
        value: '现场版'
      }, {
        text: '网易出品',
        value: '网易出品'
      }],
      // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
      changeListShow: true,
      loading: false,
      finished: false,
      // 每次限制的数量
      limit: 15,
      // 每次的偏移值
      offset: 0,
      // 歌单总数
      total: 0,
      // mv列表
      mvList: [],
    }
  },
  methods: {
    // 获取mv
    async getZuixinMvFn () {
      let result = await getZuixinMv(this.mvAreaValue, this.mvTypeValue, this.mvOrderValue, this.limit, this.offset)
      if (result.code === 200) {
        this.mvList = result.data;
        this.total = result.count;
        this.finished = false;
      }
    },
    // 切换mv地址
    async mvAreaChange (area) {
      // 返回顶部
      window.scroll(0, 0);
      // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
      this.changeListShow = false;
      this.mvList = [];
      let result = await getZuixinMv(area, this.mvTypeValue, this.mvOrderValue, this.limit, 0);
      if (result.code === 200) {
        this.mvList = result.data;
        this.total = result.count;
        this.offset = 0;
        this.finished = false;
        // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
        this.changeListShow = true;
      }
    },
    // 切换mv类型
    async mvTypeChange (type) {
      // 返回顶部
      window.scroll(0, 0);
      // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
      this.changeListShow = false;
      this.mvList = [];
      let result = await getZuixinMv(this.mvAreaValue, type, this.mvOrderValue, this.limit, 0);
      if (result.code === 200) {
        this.mvList = result.data;
        this.total = result.count;
        this.finished = false;
        this.offset = 0;
        // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
        this.changeListShow = true;
      }
    },
    // 切换mv排序
    async mvOrderChange (order) {
      // 返回顶部
      window.scroll(0, 0);
      // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
      this.changeListShow = false;
      this.mvList = [];
      let result = await getZuixinMv(this.mvAreaValue, this.mvTypeValue, order, this.limit, 0);
      if (result.code === 200) {
        this.mvList = result.data;
        this.total = result.count;
        this.finished = false;
        this.offset = 0;
        // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
        this.changeListShow = true;
      }
    },
    // 加载数据
    async onLoad () {
      // 异步更新数据
      let result = await getZuixinMv(this.mvAreaValue, this.mvTypeValue, this.mvOrderValue, this.limit, this.offset + this.limit);
      if (result.code === 200) {
        this.offset = this.offset + this.limit;
        this.mvList.push(...result.data);
        // 加载状态结束
        this.loading = false;
      }
      // 数据全部加载完成
      if (this.mvList.length >= this.total) {
        this.finished = true;
      }
    }
  },
  mounted () {
    this.getZuixinMvFn();
  }
}
</script>

<style lang="less" scoped>
	.mvlist{
		padding-top: 100/50rem;
	}
	.van-dropdown-menu{
		/deep/ .van-dropdown-menu__bar{
			position: fixed;
			width: 100%;
			z-index: 1;
			box-shadow: none;
			height: 100/50rem;
		/deep/ .van-dropdown-menu__title{
				font-size: 0.65rem;
				line-height: 1.3;
			}
		}
		/deep/ .van-cell__title{
			font-size: 0.62rem;
		}
    /deep/ .van-ellipsis{
      font-size: 0.6rem;
    } 
	}
	.van-list{
		padding-top: 100/50rem;
    margin-bottom: 70/50rem;
    /deep/ .van-list__finished-text{
      height: 100/50rem;
      line-height: 70/50rem;
      font-size: 28/50rem;
    }
  }
	.van-cell{
		padding: 40/50rem 20/50rem;
	}
  .van-cell__value{
   .mvs{
      .mvs_cover:nth-child(1){
        width: 700/50rem;
				height: 450/50rem;
				margin: 0 auto;
				overflow: hidden;
				border-radius: 50/50rem;
				background-color: pink;
				position: relative;
      }
      .mvs_info:nth-child(2){
        position: absolute;
				display: inline-block;
				bottom: 0;
				left: 0;
				width: 700/50rem;
				height: 75/50rem;
				text-align: center;
				line-height: 75/50rem;
				color: #fff;
				font-size: 32/50rem;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				background-color: rgba(0,0,0,.5);
      }
    }
  }
	.van-loading{
    padding-top: 3rem;
  }
</style>